@charset "utf-8";

//display属性补前缀
@mixin display($type) {
  display: $type;
  display: -webkit-#{$type};
}

@mixin font_size($size) {
  /*通过该函数设置字体大小，后期方便统一管理；*/
  @include font-dpr($size);
}

@mixin font_color($color) {
  /*通过该函数设置字体颜色，后期方便统一管理；*/
  color: $color;

  [data-theme="theme1"] & {
    color: $font-color-theme1;
  }

  [data-theme="theme2"] & {
    color: $font-color-theme2;
  }

  [data-theme="theme3"] & {
    color: $font-color-theme3;
  }
}

@mixin bg_color_header($color) {
  /*通过该函数设置主题颜色，后期方便统一管理；*/
  background-color: $color;

  [data-theme="theme1"] & {
    background-color: $background-color-header1;
  }

  [data-theme="theme2"] & {
    background-color: $background-color-header2;
  }

  [data-theme="theme3"] & {
    background-color: $background-color-header3;
  }
}

@mixin bg_color_menu($color) {
  /*通过该函数设置主题颜色，后期方便统一管理；*/
  background-color: $color;

  [data-theme="theme1"] & {
    background-color: $background-color-menu1 !important;
  }

  [data-theme="theme2"] & {
    background-color: $background-color-menu2 !important;
  }

  [data-theme="theme3"] & {
    background-color: $background-color-menu3 !important;
  }
}

@mixin bg_color_footer($color) {
  /*通过该函数设置主题颜色，后期方便统一管理；*/
  background-color: $color;

  [data-theme="theme1"] & {
    background-color: $background-color-footer1;
  }

  [data-theme="theme2"] & {
    background-color: $background-color-footer2;
  }

  [data-theme="theme3"] & {
    background-color: $background-color-footer3;
  }
}

@mixin bg_color_theme($color) {
  /*通过该函数设置主题颜色，后期方便统一管理；*/
  background-color: $color;

  [data-theme="theme"] & {
    background-color: $background-color-theme;
  }

  [data-theme="theme1"] & {
    background-color: $background-color-theme1;
  }

  [data-theme="theme2"] & {
    background-color: $background-color-theme2;
  }

  [data-theme="theme3"] & {
    background-color: $background-color-theme3;
  }
}

/*px转rem*/
@mixin px2rem($property, $px, $px2:false, $px3:false, $px4:false) {
  $rem: 75px;

  /* 设计稿尺寸/10 */
  @if $px and $px2 and $px3 and $px4 {
    #{$property}: ($px / $rem) + rem ($px2 / $rem) + rem ($px3 / $rem) + rem ($px4 / $rem) + rem;
  }

  @else if $px and $px2 {
    #{$property}: ($px / $rem) + rem ($px2 / $rem) + rem;
    //[data-model='pad'] & {#{$property}: ($px * 1.4 / $rem) + rem ($px2 * 1.4 / $rem) + rem;}
  }

  @else {
    #{$property}: ($px / $rem) + rem !important;
    //[data-model='pad'] & {#{$property}: ($px * 1.4 / $rem) + rem;}
  }
}

/*根据dpr计算font-size*/
@mixin font-dpr($font-size) {
  font-size: $font-size;

  [data-dpr="2"] & {
    font-size: $font-size * 2;
  }

  [data-dpr="3"] & {
    font-size: $font-size * 3;
  }
}

/*弹性盒属性*/
%flexbox {
  display: inline-flex;
  display: -webkit-flex;
  display: flex;
}

/*弹性盒比例*/
@mixin flex($num:1) {
  -webkit-box-flex: $num;
  -moz-box-flex: $num;
  -webkit-flex: $num;
  -ms-flex: $num;
  flex: $num;
}

/*超行溢出显示省略号*/
@mixin overflow($num:1, $fontSize:0, $lineHeight:1.5) {
  display: -webkit-box;
  -webkit-line-clamp: $num;
  overflow: hidden;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;

  /* autoprefixer: on */
  @if $fontSize !=0 and $lineHeight {
    /*高度需要撑开*/
    line-height: $lineHeight;

    @if $lineHeight < 1.2 {
      line-height: 1.2;
      /*最小需要1.2，否则在部分安卓机下第$num+1行会顶部漏出*/
    }

    height: $num * $fontSize * $lineHeight;

    [data-dpr="2"] & {
      height: $num * $fontSize * $lineHeight * 2 !important;
    }

    [data-dpr="3"] & {
      height: $num * $fontSize * $lineHeight * 3 !important;
    }
  }
}

//transition兼容写法
@mixin transition($content:all .2s) {
  -moz-transition: $content;
  -webkit-transition: $content;
  -o-transition: $content;
  transition: $content;
}

//transfrom兼容
@mixin translateX($num:-50%) {
  -ms-transform: translateX($num);
  -moz-transform: translateX($num);
  -webkit-transform: translateX($num);
  -o-transform: translateX($num);
  transform: translateX($num);
}

@mixin translateY($num:-50%) {
  -ms-transform: translateY($num);
  -moz-transform: translateY($num);
  -webkit-transform: translateY($num);
  -o-transform: translateY($num);
  transform: translateY($num);
}

@mixin rotate($deg:90deg) {
  -ms-transform: rotate($deg);
  -moz-transform: rotate($deg);
  -webkit-transform: rotate($deg);
  -o-transform: rotate($deg);
  transform: rotate($deg);
}